<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @apiTestRequest="apiTestRequest"
      @showApiResult="showApiResult">

       <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            type="primary"
            @click="addRow"
          >
            <i class="el-icon-plus" /> 新增
          </el-button>
          <el-button size="small" type="danger" @click="batchDelete">
            <i class="el-icon-delete"></i> 批量删除
          </el-button>
          <el-button
            size="small"
            type="warning"
            @click="onExport"
            ><i class="el-icon-download" /> 导出
          </el-button>
          <importExcel
            api="api/testApiinfo/"
            >导入
          </importExcel>
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <span slot="PaginationPrefixSlot" class="prefix">
        <el-button
          class="square"
          size="mini"
          title="批量删除"
          @click="batchDelete"
          icon="el-icon-delete"
          :disabled="!multipleSelection || multipleSelection.length == 0"
        />
      </span>

        <div slot="headersFormSlot" slot-scope="scope">
        <div style="width: 70%;margin-left: 30px;margin-top: 0px;">
          <vue-json-editor
            v-model="scope.form.headers"
            :showBtns="false"
            :mode="'code'"
            lang="zh"
            @json-change="onJsonChange"
            @json-save="onJsonSave"
            @has-error="onError"
          />
          <br>
        </div>
      </div>

      <div slot="jsonbodyFormSlot" slot-scope="scope">
        <div style="width: 70%;margin-left: 30px;margin-top: 0px;">
          <vue-json-editor
            v-model="scope.form.jsonbody"
            :showBtns="false"
            :mode="'code'"
            lang="zh"
            @json-change="onJsonChange"
            @json-save="onJsonSave"
            @has-error="onError"
          />
          <br>
        </div>
      </div>
    </d2-crud-x>


    <el-drawer :visible.sync="drawer" :size="700">
      <div slot="title">
        <span>测试结果</span>
        <el-tag size="small" style="margin-left: 10px">当前接口：{{
            apiRow.name
          }}
        </el-tag>
      </div>
      <api-result
        style="margin-top: 80px; margin-left: 10px"
        :apiRow="apiRow"
      >
      </api-result>
    </el-drawer>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import vueJsonEditor from 'vue-json-editor'
import ApiResult from '@/views/api_testapiinfo/api_result/index'

export default {
  name: 'Api_testapiinfo',
  components: { vueJsonEditor, ApiResult },
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      drawer: false,
      apiRow: {}
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    apiTestRequest ({ row }) {
      const that = this
      api.apiTest(row.id).then((res) => {
        that.$message.success('测试成功')
      })
    },
    showApiResult (scope) {
      this.drawer = true
      this.apiRow = scope.row
    },
    onExport () {
      const that = this
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const query = that.getSearch().getForm()
        return api.exportData({ ...query })
      })
    }
  }
}
</script>
